import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

import { percent } from '../../../../../common/formatter';
import Bar from './Bar';
import s from './abnormalTasks.module.css';

const numFormat = function (num) {
	try {
		return new Intl.NumberFormat('en-US').format(num);
	} catch {
		return num.toLocaleString('en-US')
	}
}
export default function AbnormalTasks({
	className,
	httpWarningCount = 0,
	pingWarningCount = 0,
}) {
	const total = httpWarningCount + pingWarningCount;

	return (
		<div className={cn(className, s.abnormalTasks)}>
			<div className={s.title}>
				<span className={s.text}>异常任务数</span>
				<span className={s.num}>{numFormat(total)}</span>
			</div>
			<div className={s.barContainer}>
				<div className={s.info}>
					<div className={s.name}>HTTP</div>
					<div className={s.num}>{numFormat(httpWarningCount)}</div>
				</div>
				<Bar
					className={s.bar}
					precent={percent(httpWarningCount / total)}
					bgColor="rgba(250, 175, 44, 0.3)"
					color="#FAAF2C"
				/>
			</div>
			<div className={s.barContainer}>
				<div className={s.info}>
					<div className={s.name}>Ping</div>
					<div className={s.num}>{numFormat(pingWarningCount)}</div>
				</div>
				<Bar
					className={s.bar}
					precent={percent(pingWarningCount / total)}
					bgColor="rgba(240, 64, 56, 0.3)"
					color="#F04038"
				/>
			</div>
		</div>
	);
}

AbnormalTasks.propTypes = {
	className: PropTypes.string,
	httpWarningCount: PropTypes.number,
	pingWarningCount: PropTypes.number,
};

AbnormalTasks.defaultProps = {
	className: s.abnormalTasks,
};
